<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <!--        <el-upload
                  class="upload-demo"
                  :action="upload.uploadUrl"
                  :headers="upload.headers"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-upload="beforeUpload"
                  :before-remove="beforeRemove"
                  :limit="5"
                  multiple
                  :on-exceed="handleExceed"
                  :on-success="handleAvatarSuccess"
                  :show-file-list="false"
                  ref="upload"
                  :file-list="upload.imageList"
                  >
                  <el-button size="mini" type="primary" ><i class="el-icon-upload el-icon&#45;&#45;right"/>上传</el-button>
                </el-upload>-->

                <file-image-upload :moduleGuid.sync="moduleGuid" :moduleName.sync="moduleName"></file-image-upload>
            </el-col>
            <el-col :span="1.5">
                <el-button :disabled="multiple" icon="el-icon-delete" size="mini" type="danger" @click="handleDelete">删除</el-button>
            </el-col>
        </el-row>

        <el-table :border="false" v-loading="loading" :data="uploadList" empty-text="暂无数据" highlight-current-row @selection-change="handleSelectionChange">
            <el-table-column align="center" type="selection" width="55" />
            <el-table-column align="center" label="文件名称" prop="fileName" show-overflow-tooltip />
            <el-table-column align="center" label="上传时间" prop="updateTime" />
        </el-table>
        <Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total" @pagination="getList" />
    </div>
</template>

<script>
import Pagination from '@/components/Pagination';
import request from '@/utils/request';
import FileImageUpload from '../../../components/FileImageUpload';

export default {
    name: 'Upload',
    components: {
        Pagination,
        FileImageUpload,
    },
    props: {
        moduleName: {
            default: '3D模型',
            type: String,
        },
        moduleGuid: {
            default: '123456789',
            type: String,
        },
    },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 上传信息表格数据
            uploadList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                deptIdStrs: null,
                moduleName: '',
                moduleGuid: '',
                resourceUrl: null,
                orderByColumn: 'id',
                isAsc: 'desc',
            },
            upload: {
                // 设置上传的请求头部
                headers: { Authorization: 'Bearer ' + sessionStorage.getItem('Admin-Token-WebTopo') },
                // 上传的地址
                uploadUrl: '',
                imageList: [],
            },
            dialogVisible: false,
            imageUrl: '',
            baseApi: '/prod-api',
            selectionImage: {},
        };
    },
    created() {
        // this.getList();
    },
    mounted() {},
    methods: {
        /** 查询上传信息列表 */
        getList() {
            this.queryParams.moduleGuid = this.moduleGuid;
            this.queryParams.moduleName = this.moduleName;
            this.loading = true;
            let url = '/zutai/upload/list';
            request({
                url: url,
                method: 'get',
                params: this.queryParams,
            })
                .then((res) => {
                    // console.log('获取成功!',res);
                    if (res.code == 200) {
                        this.uploadList = res.rows;
                        this.total = res.total;
                    }
                    this.loading = false;
                    let modelList = [];
                    //this.baseApi、'http://localhost:10072'
                    let baseApi = this.baseApi;
                    this.uploadList.forEach((element) => {
                        modelList.push(baseApi + element.resourceUrl);
                    });
                    this.$emit('modelList', modelList);
                })
                .catch((error) => {
                    // console.log(error)
                    this.loading = false;
                });
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
            this.selectionImage = selection;
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            let that = this;
            this.$confirm('是否确认删除此模型', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(function () {
                return that.deleImage(ids);
            });
        },
        deleImage(ids) {
            let url = '/zutai/upload/' + ids;
            let that = this;
            request({
                url: url,
                method: 'delete',
            }).then(() => {
                that.getList();
                that.msgSuccess('删除成功');
            });
        },
        uploadFile() {},
        handleRemove(file, fileList) {
            console.log(file, fileList);
            const data = {
                isMultiple: true,
                moduleGuid: this.moduleGuid,
                moduleName: this.moduleName,
            };
            console.log(data);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            console.log(files);
            console.log(fileList);
        },
        beforeUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 20;
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 20MB!');
            }
            return isLt2M;
        },
        beforeRemove(file, fileList) {
            //return this.$confirm(`确定移除 ${ file.name }？`);
        },
        handleAvatarSuccess(res, file) {
            if (res.code == 200) {
                this.msgSuccess('上传成功');
                this.getList();
                this.$refs.upload.clearFiles();
            } else {
                this.msgSuccess(res.msg);
            }
        },
        msgSuccess(msg) {
            this.$message({
                message: msg,
                type: 'success',
            });
        },
    },
};
</script>
<style>
/* .app-container .el-upload-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
} */
.image {
    width: 30px;
    height: 30px;
}
</style>>
